<template>
    <div>
        <el-form ref="ruleForm" :model="ruleForm"  :rules="rules" label-width="100px" style="width: 800px;margin: 10px 10px">
            <el-col :span="12">
                <el-form-item label="维修记录编号" prop="mainId">
                    <el-input :disabled="true" v-model="ruleForm.mainId"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="维修人员" prop="mainPerson">
                    <el-input :disabled="true" v-model="dUser.username"></el-input>
                </el-form-item>
            </el-col>

            <el-form-item label="人工费" prop="personPay">
                <el-input type="double" v-model="ruleForm.personPay"></el-input>
            </el-form-item>

            <el-form-item label="材料费" prop="matiPay">
                <el-input type="double" v-model="ruleForm.matiPay"></el-input>
            </el-form-item>

            <el-form-item label="检修状态" >
                <el-select id="mainStatus"  v-model="ruleForm.mainStatus" placeholder="请选择检修状态">
                    <el-option
                            v-for="item in mainStatusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="维修延迟程度">
                <el-select v-model="ruleForm.postponeDegree" placeholder="请选择维修延迟程度">
                    <el-option
                            v-for="item in postponeDegreeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="维修检测时间" >
                <el-date-picker
                        v-model="ruleForm.checkTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="getTime"
                        placeholder="选择维修检测时间">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="检测记录">
                <el-input type="textarea" v-model="ruleForm.checkOrder"></el-input>
            </el-form-item>
            <el-form-item label="维修记录">
                <el-input type="textarea" v-model="ruleForm.mainOrder"></el-input>
            </el-form-item>
            <el-form-item label="保修承诺">
                <el-input type="textarea" v-model="ruleForm.mainPermit"></el-input>
            </el-form-item>
            <el-form-item label="注意事项">
                <el-input type="textarea" v-model="ruleForm.note"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">修改</el-button>
<!--                <el-button @click="resetForm">重置</el-button>-->
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {getDataInfo as getDataInfo} from '../../api/dMaintenance'
    import {submitForm as submitForm} from '../../api/dMaintenance'
    export default {
        //inject:['reload'],
        props:["mainId"],
        data () {
            //name:"edit";
            return {
                ruleForm:{
                    //维修记录id
                    mainId:"",
                    //维修人员
                    mainPerson:"",
                    //分配时间
                    disTime:"",
                    //检测记录
                    checkOrder:"",
                    //维修记录
                    mainOrder:"",
                    //维修检测时间
                    checkTime:"",
                    //人工费
                    personPay:"",
                    //材料费
                    matiPay:"",
                    //保修承诺
                    mainPermit:"",
                    //注意事项
                    note:"",
                    //检修状态\n1、已分配\n2、已维修\n3、撤销\n
                    mainStatus:"",
                    //维修延迟程度\n1、一般\n2比较严重\n3、严重\n
                    postponeDegree:"",
                    //创建时间
                    createTime:"",
                    //最后修改时间
                    alterTime:"",
                    serviceId:"",
                },
                rules: {
                    checkOrder: [
                        {required: true,message: '请输入检测记录', trigger:'blur'}
                    ],
                    mainOrder: [
                        {required: true,message: '请输入维修记录', trigger:'blur'}
                    ],
                    checkTime: [
                        {required: true,message: '请选择维修检测时间', trigger:'blur'}
                    ],
                    personPay: [
                        { required: true, message: '请输入人工费', trigger: 'blur' }
                    ],
                    matiPay: [
                        { required: true, message: '请输入材料费', trigger: 'blur' }
                    ],
                    mainPermit: [
                        {  required: true, message: '请输入保修承诺', trigger: 'blur' }
                    ],
                    note: [
                        {  required: true, message: '请输入注意事项', trigger: 'blur' }
                    ],
                    mainStatus: [
                        {  required: true, message: '请选择检修状态', trigger: 'blur' }
                    ],
                    postponeDegree: [
                        {  required: true, message: '请选择维修延迟程度', trigger: 'blur' }
                    ],
                },
                buttonText:"修改",
                mainStatusOptions: [{
                    value: 1,
                    label: '已分配'
                }, {
                    value: 2,
                    label: '已维修'
                },{
                    value: 3,
                    label: '已撤销'
                }],
                postponeDegreeOptions: [{
                    value: 1,
                    label: '一般'
                },{
                    value: 2,
                    label: '比较严重'
                },{
                    value: 3,
                    label: '严重'
                }],
                dUser: {
                    uId:"",
                    username:""
                }
            }
        },
        created(){
            if(this.mainId){
                let param = new URLSearchParams();
                param.append('mainId', this.mainId);
                this.getDataInfo(param);
                //this.buttonText="修改"
            }
        },
        components: {

        },
        methods:{
            //获取数据
            getDataInfo(param) {
                //【注意】必须使用这种方式传递参数，否则后台参数无法接收到
                // 具体原因请看https://blog.csdn.net/csdn_yudong/article/details/79668655
                let that = this;
                // 执行方法
                getDataInfo(param).then(r=>{
                    console.log(r);
                    that.ruleForm = r.info;
                    that.dUser = r.dUser;

                }).catch(_=>{
                    console.log(_);
                })
            },
            getTime(date){
                this.ruleForm.checkTime = date;
                console.log("修改后日期格式："+this.ruleForm.checkTime);
            },
            statusFormat(cellValue) {
                //1、未分配 2、已分配 3、已维修 4、撤销
                if (cellValue == 1){
                    return "已分配"
                }else if (cellValue == 2){
                    return "已维修"
                }else {
                    return "已撤销"
                }
            },
            submitForm(){
                    let param = new URLSearchParams();
                    param.append('mainId',this.ruleForm.mainId);
                    param.append('checkOrder',this.ruleForm.checkOrder);
                    param.append('mainOrder',this.ruleForm.mainOrder);
                    param.append('checkTime',this.ruleForm.checkTime);
                    param.append('personPay',this.ruleForm.personPay);
                    param.append('matiPay',this.ruleForm.matiPay);
                    param.append('mainPermit',this.ruleForm.mainPermit);
                    param.append('note',this.ruleForm.note);
                    param.append('mainStatus',this.ruleForm.mainStatus);
                    param.append('postponeDegree',this.ruleForm.postponeDegree);
                    param.append("serviceId",this.ruleForm.serviceId);
                    // 执行方法
                    submitForm(param).then(r=>{
                        console.log(r);
                        alert(r);
                    }).catch(_=>{
                        console.log(_);
                    })

            }

        }
    }
</script>

<style scoped>


</style>
